<template>
  <div class="script_category" id="scriptCategory">
    <el-menu :default-active="activeIndex" class="script-el-menu">
      <el-menu-item index="-1" class="script-el-menu-item">
        <span class="header_name">分类列表</span>
        <span @click.stop="addOrUpdateCategory()" title="增加话术分类" class="el-icon-circle-plus-outline ml5"></span>
      </el-menu-item>
      <el-menu-item :index="index + ''" :key="item.id" v-for="(item, index) in entityList"
        :class="index == activeIndex ? 'is-active-custom' : ''" class="script-el-menu-item"
        @click="categoryClick(item, index)" :title="item.scriptCategoryName">
        <span class="item-name">{{ item.scriptCategoryName }}</span>
        <div class="win-flex-row">
          <span @click.stop="addOrUpdateCategory(item)" title="修改" class="el-icon-edit-outline edit-icon"></span>
          <span @click.stop="delCategory(item)" title="删除" class="el-icon-delete edit-icon"></span>
        </div>
      </el-menu-item>
    </el-menu>
    <div class="oper_btn_content">
      <el-button type="primary" size="small" @click="importSelectFolder">导入话术</el-button>
    </div>
    <!-- <file-upload :showUploadSuccessMsg="false" class="padding10" :fileSize="100" buttonText="导入话术" buttonIcon="none"
      :uploadUrl="importCategoryUrl" :is-show-transition="false" :file-type="fileType" :isShowTip="false"
      :showMessage="false" @success="onSuccess">
    </file-upload> -->
  </div>
</template>
<script>
import { getList, deleteEntity, saveEntity, importCategoryUrl, importSelectFolder } from '@/api/script/category.js';
export default {
  name: 'ScriptCategory',
  props: {
  },
  components: {
    FileUpload: resolve => require(['@/components/FileUpload/index.vue'], resolve),
  },
  data() {
    return {
      entityList: [],
      //这个必须是字符串，否则会报错
      activeIndex: '0',
      importCategoryUrl: '',
      fileType: ['zip'],
      pageParams: {
        pageNum: 1,
        pageSize: 50,
        queryParams: {
        }
      }
    };
  },
  created() {
    this.importCategoryUrl = importCategoryUrl;
  },
  mounted() {
    this.getList();
  },
  computed: {
  },
  methods: {
    importSelectFolder() {
      importSelectFolder().then(res => {
        this.$modal.msgSuccess('操作成功');
        this.getList(true);
      });
    },
    onSuccess() {
      this.$message.success('导入成功');
      this.getList(true);
    },
    getList(isExport = false) {
      let pageParams = this.pageParams;
      getList(pageParams).then(res => {
        this.entityList = res.result.items;
        if (this.entityList.length > 0) {
          this.activeIndex = '0';
          if (isExport) {
            this.activeIndex = this.entityList.length - 1 + '';
          }
          this.$emit('categorySuccess', this.entityList[this.activeIndex].id);
        }
      });
    },
    addOrUpdateCategory(item = {}) {
      let scriptCategoryName;
      if (item) {
        scriptCategoryName = item.scriptCategoryName;
      }
      this.$prompt('请输入分类名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        inputValue: scriptCategoryName,
        inputValidator: val => {
          if (!val) {
            return false;
          }
          if (val.trim() == '') {
            return false;
          }
        },
        inputErrorMessage: '内容不能为空'
      }).then(({ value }) => {
        saveEntity({
          ...item,
          scriptCategoryName: value
        }).then(res => {
          this.$modal.msgSuccess('操作成功');
          this.getList();
        });
      }).catch(() => { });
    },
    delCategory(item) {
      this.$confirm('是否确认删除该数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return deleteEntity(item.id);
      }).then(() => {
        this.getList();
        this.activeIndex = '0';
        this.$emit('categorySuccess', this.entityList[0].id);
        this.$modal.msgSuccess('删除成功');
      });
    },
    categoryClick(item, index) {
      this.activeIndex = index + '';
      this.$emit('categorySuccess', item.id ? item.id : '');
    }
  }
};
</script>
<style lang="scss">
.script_category {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  margin-right: 10px;
  width: 202px;
  border: 1px solid var(--color-border-first);
  box-shadow: 0px 2px 20px 0px rgb(197 208 245 / 36%);

  .oper_btn_content {
    text-align: center;
    margin-bottom: 5px;
  }

  .el-pagination {
    padding-right: 0px !important;

    .btn-prev {
      padding-right: 6px !important;
    }

    .btn-next {
      padding-left: 6px !important;
    }
  }

  .script-el-menu {
    border-right: none;
    height: 100%;

    .search-name {
      padding: 3px 5px;
    }

    .header_name {
      font-weight: bold;
    }

    .is-active-custom {
      background-color: #e8f4ff;

      span {
        font-weight: 500;
      }
    }

    .script-el-menu-item {
      display: flex;
      width: 100%;
      align-items: center;
      position: relative;
      padding-right: 5px !important;
      padding-left: 20px !important;
      height: 46px;
      line-height: 46px;

      .item-name {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 25px;
      }

      .edit-icon {
        font-size: 14px;
        margin-right: 0px;
      }
    }

    .el-submenu__title {
      font-size: 15px;
      font-weight: bold;
      height: 45px;
      line-height: 45px;
    }

  }
}
</style>
